<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href='http://fonts.useso.com/css?family=Open+Sans:300,400,600&subset=latin,latin-ext' rel='stylesheet'>
    <link href="css/common.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>ReactJS开发入门</h1>
<div class="BlogContent"><p>ReactJS的确是一个伟大的东西，就其核心而言，就是一个可以和html混合编写的jsx格式，以及一个良好有序（加载时和更新时）、并和html渲染实时捆绑的状态机制。学习和使用ReactJS，你并不需要对你现有的代码架构做太大的调整，只要引入react.js和react-dom.js两个文件，就能开始了。</p>
    <span id="OSC_h3_1"></span><h3 id="jsx-">JSX之为物</h3>
    <p>首先，不要对jsx这个东西产生抗拒，如果你感到不爽，你完全可以直接使用js，只是你需要写很多嵌套的代码，比如如下：</p>
<pre><code class="lang-jsx hljs actionscript"><span class="hljs-keyword"><span class="hljs-keyword">var</span></span> Test = React.createClass({
    displayName: <span class="hljs-string"><span class="hljs-string">'Test'</span></span>,
    render: <span class="hljs-function"><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span><span class="hljs-function"> </span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">()</span></span></span><span class="hljs-function"> </span></span>{
    <span class="hljs-keyword"><span class="hljs-keyword">return</span></span> (
    &lt;div className=<span class="hljs-string"><span class="hljs-string">"ui form"</span></span>&gt;
    &lt;div className=<span class="hljs-string"><span class="hljs-string">"field"</span></span>&gt;
    &lt;label&gt;hello world&lt;/label&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    );
    }
    });
</code></pre>
    <p>实际上对应生成的是这样的js代码：</p>
<pre><code class="lang-js hljs javascript"><span class="hljs-keyword"><span class="hljs-keyword">var</span></span> Test = React.createClass({
    displayName: <span class="hljs-string"><span class="hljs-string">'Test'</span></span>,
    render: <span class="hljs-function"><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span><span class="hljs-function"> </span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">()</span></span></span><span class="hljs-function"> </span></span>{
    <span class="hljs-keyword"><span class="hljs-keyword">return</span></span> React.createElement(
    <span class="hljs-string"><span class="hljs-string">'div'</span></span>,
    { className: <span class="hljs-string"><span class="hljs-string">'ui form'</span></span> },
    React.createElement(
    <span class="hljs-string"><span class="hljs-string">'div'</span></span>,
    { className: <span class="hljs-string"><span class="hljs-string">'field'</span></span> },
    React.createElement(
    <span class="hljs-string"><span class="hljs-string">'label'</span></span>,
    <span class="hljs-literal"><span class="hljs-literal">null</span></span>,
    <span class="hljs-string"><span class="hljs-string">'hello world'</span></span>
    )
    )
    );
    }
    });
</code></pre>
    <p>当然，如果你的html结构嵌套的更加复杂，对应的js，将变得更加恐怖。无论如何，html看起来还是更加直观的。</p>
    <p>在jsx中，你可以使用如常见的模板语言一般，在html代码里面直接使用js的变量和函数。</p>
<pre><code class="lang-jsx hljs actionscript"><span class="hljs-keyword"><span class="hljs-keyword">var</span></span> Test = React.createClass({
    displayName: <span class="hljs-string"><span class="hljs-string">'Test'</span></span>,
    getInitialState: <span class="hljs-function"><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">()</span></span></span><span class="hljs-function"> </span></span>{
    <span class="hljs-keyword"><span class="hljs-keyword">return</span></span> {
    title: <span class="hljs-string"><span class="hljs-string">''</span></span>,
    list: [
    { name: <span class="hljs-string"><span class="hljs-string">'Jan'</span></span> },
    { name: <span class="hljs-string"><span class="hljs-string">'Easy'</span></span> }
    ]
    };
    },
    render: <span class="hljs-function"><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span><span class="hljs-function"> </span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">()</span></span></span><span class="hljs-function"> </span></span>{
    <span class="hljs-keyword"><span class="hljs-keyword">return</span></span> (
    &lt;div&gt;
    &lt;div className=<span class="hljs-string"><span class="hljs-string">"ui header"</span></span>&gt;
    {<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.state.title}
    &lt;/div&gt;
    &lt;div className=<span class="hljs-string"><span class="hljs-string">"ui list"</span></span>&gt;
    {
    _.map(<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.state.list, <span class="hljs-function"><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(item)</span></span></span><span class="hljs-function"> </span></span>{
    <span class="hljs-keyword"><span class="hljs-keyword">return</span></span> (
    &lt;div className=<span class="hljs-string"><span class="hljs-string">"item"</span></span>&gt;{item.name}&lt;/div&gt;
    );
    })
    }
    &lt;/div&gt;
    &lt;/div&gt;
    );
    }
    });
</code></pre>
    <p>哦，是的，一切都是你亲切而又熟悉的html，js，和className。</p>
    <span id="OSC_h4_2"></span><h4 id="gulp-jsx-">gulp实时编译JSX文件</h4>
    <p>JSX有如此这般的便利，唯一剩下的问题就是，如何将JSX进行转换。ReactJS官网提供了一种实时加载JSX的方式，但我自己觉得并不实用——毕竟现在前端类库，已经是从几个类库一跃到几十个类库了。通过gulp的watch是一个更好的选择。</p>
    <p>严格意义上说，对react进行编译处理，只需要引入以下的三个库，就可以了：</p>
<pre><code class="lang-shell hljs q">npm install gulp gulp-babel babel-preset-react --<span class="hljs-built_in"><span class="hljs-built_in">save</span></span>-<span class="hljs-built_in"><span class="hljs-built_in">dev</span></span>
</code></pre>
    <p>比如我当前的演示项目：</p>
    <p><a href="https://static.oschina.net/uploads/img/201603/05090102_r6gL.png" target="_blank"><img src="https://static.oschina.net/uploads/img/201603/05090102_r6gL.png" alt="输入图片说明" title="在这里输入图片标题" style="cursor: pointer;"></a></p>
    <p>编辑gulpfile.js，加入以下代码：</p>
<pre><code class="lang-js hljs javascript"><span class="hljs-keyword"><span class="hljs-keyword">var</span></span> gulp = <span class="hljs-built_in"><span class="hljs-built_in">require</span></span>(<span class="hljs-string"><span class="hljs-string">'gulp'</span></span>);
    <span class="hljs-keyword"><span class="hljs-keyword">var</span></span> babel = <span class="hljs-built_in"><span class="hljs-built_in">require</span></span>(<span class="hljs-string"><span class="hljs-string">'gulp-babel'</span></span>);

    gulp.task(<span class="hljs-string"><span class="hljs-string">'jsx'</span></span>, <span class="hljs-function"><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span><span class="hljs-function"> </span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">()</span></span></span><span class="hljs-function"> </span></span>{
    gulp.src(<span class="hljs-string"><span class="hljs-string">'./jsx/*.jsx'</span></span>)
    .pipe(babel({
    presets: [<span class="hljs-string"><span class="hljs-string">'react'</span></span>]
    }))
    .pipe(gulp.dest(<span class="hljs-string"><span class="hljs-string">'./jsx'</span></span>));
    });

    gulp.task(<span class="hljs-string"><span class="hljs-string">'watch-jsx'</span></span>, [<span class="hljs-string"><span class="hljs-string">'jsx'</span></span>], <span class="hljs-function"><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span><span class="hljs-function"> </span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">()</span></span></span><span class="hljs-function"> </span></span>{
    gulp.watch([
    <span class="hljs-string"><span class="hljs-string">'./jsx/*.jsx'</span></span>
    ], [<span class="hljs-string"><span class="hljs-string">'jsx'</span></span>]);
    });
</code></pre>
    <p>然后在命令行执行<code>gulp watch-jsx</code>，这时每次你修改中/jsx目录下的*.jsx文件，并保存时，他自动就会将jsx转换为js文件。</p>
    <span id="OSC_h4_3"></span><h4 id="jsx-">JSX的事件处理</h4>
    <p>使用JSX的另外一个好处是，不再需要依赖jquery这种DOM的框架了。</p>
    <p>JSX生成的对象实际上还是一个DOM实例，所以一切关于DOM原生的知识就又可以派上用场了，当然，除非你极度依赖于jquery什么的。其实在ReactJS里面，类如Mootools这种原生对象注入的类库，会有更大的用处，jquery反而一无是处。</p>
<pre><code class="lang-js hljs javascript"><span class="hljs-keyword"><span class="hljs-keyword">var</span></span> hello_world = React.createClass({
    displayName: <span class="hljs-string"><span class="hljs-string">'hello_world.jsx'</span></span>,
    handleClick: <span class="hljs-function"><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(event)</span></span></span><span class="hljs-function"> </span></span>{
    <span class="hljs-keyword"><span class="hljs-keyword">var</span></span> link = event.target;
    },
    render: <span class="hljs-function"><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span><span class="hljs-function"> </span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">()</span></span></span><span class="hljs-function"> </span></span>{
    <span class="hljs-keyword"><span class="hljs-keyword">return</span></span> (
                <span class="xml"><span class="hljs-tag"><span class="xml"><span class="hljs-tag">&lt;</span></span><span class="hljs-title"><span class="xml"><span class="hljs-tag"><span class="hljs-title">a</span></span></span></span><span class="xml"><span class="hljs-tag"> </span></span><span class="hljs-attribute"><span class="xml"><span class="hljs-tag"><span class="hljs-attribute">className</span></span></span></span><span class="xml"><span class="hljs-tag">=</span></span><span class="hljs-value"><span class="xml"><span class="hljs-tag"><span class="hljs-value">"hello"</span></span></span></span><span class="xml"><span class="hljs-tag"> </span></span><span class="hljs-attribute"><span class="xml"><span class="hljs-tag"><span class="hljs-attribute">onClick</span></span></span></span><span class="xml"><span class="hljs-tag">=</span></span><span class="hljs-value"><span class="xml"><span class="hljs-tag"><span class="hljs-value">{this.handleClick}</span></span></span></span><span class="xml"><span class="hljs-tag">&gt;</span></span></span><span class="xml">
                    hello world
                </span><span class="hljs-tag"><span class="xml"><span class="hljs-tag">&lt;/</span></span><span class="hljs-title"><span class="xml"><span class="hljs-tag"><span class="hljs-title">a</span></span></span></span><span class="xml"><span class="hljs-tag">&gt;</span></span></span><span class="xml">
            )</span></span>;
    }
    });
</code></pre>
    <p>ReactJS 0.14以后，取消了事件过程内return false来中断事件，要事件中断，请使用<code>e.preventDefault</code>和<code>e.stopPropagation</code>，详细的可以参考官方文档：<a href="https://facebook.github.io/react/docs/events.html。">https://facebook.github.io/react/docs/events.html。</a></p>
    <p>这里特别注意this的作用域问题。</p>
<pre><code class="lang-php hljs"><span class="hljs-keyword"><span class="hljs-keyword">var</span></span> Test = React.createClass({
    displayName: <span class="hljs-string"><span class="hljs-string">'Test'</span></span>,
    getInitialState: <span class="hljs-function"><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">()</span></span></span><span class="hljs-function"> </span></span>{
    <span class="hljs-keyword"><span class="hljs-keyword">return</span></span> {
    title: <span class="hljs-string"><span class="hljs-string">''</span></span>,
    <span class="hljs-keyword"><span class="hljs-keyword">list</span></span>: [
    { name: <span class="hljs-string"><span class="hljs-string">'Jan'</span></span> },
    { name: <span class="hljs-string"><span class="hljs-string">'Easy'</span></span> }
    ]
    };
    },
    handleClick: <span class="hljs-function"><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">()</span></span></span><span class="hljs-function"> </span></span>{

    },
    render: <span class="hljs-function"><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span><span class="hljs-function"> </span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">()</span></span></span><span class="hljs-function"> </span></span>{
    <span class="hljs-keyword"><span class="hljs-keyword">return</span></span> (
    &lt;div&gt;
    &lt;div className=<span class="hljs-string"><span class="hljs-string">"ui header"</span></span>&gt;
    {this.state.title}
    &lt;/div&gt;
    &lt;div className=<span class="hljs-string"><span class="hljs-string">"ui list"</span></span>&gt;
    {
    _.map(this.state.<span class="hljs-keyword"><span class="hljs-keyword">list</span></span>, <span class="hljs-function"><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(item)</span></span></span><span class="hljs-function"> </span></span>{
    <span class="hljs-keyword"><span class="hljs-keyword">return</span></span> (
    &lt;a className=<span class="hljs-string"><span class="hljs-string">"item"</span></span> onClick={this.handleClick}&gt;{item.name}&lt;/a&gt;
    );
    })
    }
    &lt;/div&gt;
    &lt;/div&gt;
    );
    }
    });
</code></pre>
    <p>这里是一个错误的示范，this.handleClick在_.map的闭包中，实际上指向了另外一个空间——所以，这个例子就算你点爆了你的浏览器，this.handleClick也是不会触发的。</p>
    <p>这个问题，又存在一个反向的情况，即假定你绑定了某个本地变量为某个实例，在onClick这里调用这个实例的某个方法句柄。当onClick被触发的时候，他能成功执行到这个方法，但是本地对象却变成了这个DOM元素，而不是你预想的那个实例。这其实是对象冒充，他调用这个方法的时候指定了call或apply的主体执行对象。所以这里值得注意，但同时他又是一个可以使用各种奇淫巧技的入口，你懂的——执行方法主体虽然绑定了，然而局部上下文环境却是生效的，噢噢噢我不能说得太多。</p>
    <span id="OSC_h3_4"></span><h3 id="-">状态初始化</h3>
    <p>状态（state）是ReactJS的精华之所在，基于这个状态，不但是一个React实例的数据载体，他还可以起到名副其实的控制状态，并且，通过更新状态，会触发React实例的ComponentUpdate，从而进行局部的重新渲染。</p>
    <p>基本使用，你可以将状态视为数据的载体，在render的过程中使用。</p>
<pre><code class="lang-js hljs javascript"><span class="hljs-keyword"><span class="hljs-keyword">var</span></span> Test = React.createClass({
    displayName: <span class="hljs-string"><span class="hljs-string">'Test'</span></span>,
    getDefaultProps: <span class="hljs-function"><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">()</span></span></span><span class="hljs-function"> </span></span>{
    <span class="hljs-keyword"><span class="hljs-keyword">return</span></span> {
    name: <span class="hljs-string"><span class="hljs-string">''</span></span>
    };
    },
    getInitialState: <span class="hljs-function"><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">()</span></span></span><span class="hljs-function"> </span></span>{
    <span class="hljs-keyword"><span class="hljs-keyword">return</span></span> {
    name: <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.props.name
    };
    },
    render: <span class="hljs-function"><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span><span class="hljs-function"> </span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">()</span></span></span><span class="hljs-function"> </span></span>{
    <span class="hljs-keyword"><span class="hljs-keyword">return</span></span> (
                <span class="xml"><span class="hljs-tag"><span class="xml"><span class="hljs-tag">&lt;</span></span><span class="hljs-title"><span class="xml"><span class="hljs-tag"><span class="hljs-title">div</span></span></span></span><span class="xml"><span class="hljs-tag">&gt;</span></span></span><span class="xml">
                    </span><span class="hljs-tag"><span class="xml"><span class="hljs-tag">&lt;</span></span><span class="hljs-title"><span class="xml"><span class="hljs-tag"><span class="hljs-title">div</span></span></span></span><span class="xml"><span class="hljs-tag"> </span></span><span class="hljs-attribute"><span class="xml"><span class="hljs-tag"><span class="hljs-attribute">className</span></span></span></span><span class="xml"><span class="hljs-tag">=</span></span><span class="hljs-value"><span class="xml"><span class="hljs-tag"><span class="hljs-value">"ui header"</span></span></span></span><span class="xml"><span class="hljs-tag">&gt;</span></span></span><span class="xml">
                        {this.state.name}
                    </span><span class="hljs-tag"><span class="xml"><span class="hljs-tag">&lt;/</span></span><span class="hljs-title"><span class="xml"><span class="hljs-tag"><span class="hljs-title">div</span></span></span></span><span class="xml"><span class="hljs-tag">&gt;</span></span></span><span class="xml">
                </span><span class="hljs-tag"><span class="xml"><span class="hljs-tag">&lt;/</span></span><span class="hljs-title"><span class="xml"><span class="hljs-tag"><span class="hljs-title">div</span></span></span></span><span class="xml"><span class="hljs-tag">&gt;</span></span></span><span class="xml">
            )</span></span>;
    }
    });

    <span class="hljs-keyword"><span class="hljs-keyword">var</span></span> element = ReactDOM.render(<span class="xml"><span class="hljs-tag"><span class="xml"><span class="hljs-tag">&lt;</span></span><span class="hljs-title"><span class="xml"><span class="hljs-tag"><span class="hljs-title">Test</span></span></span></span><span class="xml"><span class="hljs-tag"> </span></span><span class="hljs-attribute"><span class="xml"><span class="hljs-tag"><span class="hljs-attribute">name</span></span></span></span><span class="xml"><span class="hljs-tag">=</span></span><span class="hljs-value"><span class="xml"><span class="hljs-tag"><span class="hljs-value">"hello"</span></span></span></span><span class="xml"><span class="hljs-tag"> /&gt;</span></span></span><span class="xml">, document.getElementById('hello'));</span></span><span class="xml">
</span></code></pre>
    <p>上述这是一个较为完整的示例。</p>
    <p>首先创建了一个React Class（实际上是React Component）。</p>
    <p><code>&lt;Test name="hello" /&gt;</code>，创建了一个React Element，到目前为止，这还是一个虚拟的元素。虚拟元素并不具有Class实例的方法。</p>
    <p>在执行了ReactDOM.render所返回的实例，才是将React Element添加进DOM树，并正式返回一个React Class的实例，这时，React的所有相关方法才开始生效。</p>
    <p>在React Classs中：</p>
    <p><code>getDefaultProps</code>方法，用于声明一个React 实例的默认属性，这里我声明了一个name。而在创建React Element时，我实际设置了name=hello。这个<code>getDefaultProps</code>方法，保证了你的React实例默认的属性结构，以减少一些繁琐的判断。</p>
    <p><code>getInitialState</code>方法，是获取初始化的状态值，这里我将state.name取值于props.name，当然这未必是一个推荐的做法。</p>
    <span id="OSC_h4_5"></span><h4 id="-">变更状态</h4>
    <p>你可以使用setState和replaceState的方法，来对React实例进行状态的变更。如上的例子：</p>
<pre><code class="lang-js hljs javascript">element.setState({ name: <span class="hljs-string"><span class="hljs-string">'Tom'</span></span> });
</code></pre>
    <p>页面显示的内容会随着你执行setState而发生变化，当然这是一个不太高明的例子。</p>
    <p>状态的变更，是会触发组件重新执行render的（所以说组件内的局部渲染并不准确）。这是一个非常透明的机制，他除了能简单的控制输出数据的变化，还可以起到组件的状态化切换的效果。</p>
    <p>比如我们经常做登录的登录界面：</p>
<pre><code class="lang-js hljs javascript"><span class="hljs-keyword"><span class="hljs-keyword">var</span></span> LoginForm = React.createClass({
    displayName: <span class="hljs-string"><span class="hljs-string">'LoginForm'</span></span>,
    getInitialState: <span class="hljs-function"><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">()</span></span></span><span class="hljs-function"> </span></span>{
    <span class="hljs-keyword"><span class="hljs-keyword">return</span></span> {
    isPost: <span class="hljs-literal"><span class="hljs-literal">false</span></span>,
    account: <span class="hljs-string"><span class="hljs-string">''</span></span>,
    password: <span class="hljs-string"><span class="hljs-string">''</span></span>
    };
    },
    handleSubmit: <span class="hljs-function"><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">()</span></span></span><span class="hljs-function"> </span></span>{
    <span class="hljs-keyword"><span class="hljs-keyword">if</span></span> (!<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.state.isPost) {
    <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.setState({ isPost: <span class="hljs-literal"><span class="hljs-literal">true</span></span> }); <span class="hljs-comment"><span class="hljs-comment">// 注意，这里设置了状态</span></span>
    }
    },
    render: <span class="hljs-function"><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span><span class="hljs-function"> </span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">()</span></span></span><span class="hljs-function"> </span></span>{
    <span class="hljs-keyword"><span class="hljs-keyword">return</span></span> (
                <span class="xml"><span class="hljs-tag"><span class="xml"><span class="hljs-tag">&lt;</span></span><span class="hljs-title"><span class="xml"><span class="hljs-tag"><span class="hljs-title">form</span></span></span></span><span class="xml"><span class="hljs-tag"> </span></span><span class="hljs-attribute"><span class="xml"><span class="hljs-tag"><span class="hljs-attribute">method</span></span></span></span><span class="xml"><span class="hljs-tag">=</span></span><span class="hljs-value"><span class="xml"><span class="hljs-tag"><span class="hljs-value">"post"</span></span></span></span><span class="xml"><span class="hljs-tag"> </span></span><span class="hljs-attribute"><span class="xml"><span class="hljs-tag"><span class="hljs-attribute">onSubmit</span></span></span></span><span class="xml"><span class="hljs-tag">=</span></span><span class="hljs-value"><span class="xml"><span class="hljs-tag"><span class="hljs-value">{this.handleSubmit}</span></span></span></span><span class="xml"><span class="hljs-tag">&gt;</span></span></span><span class="xml">
                    </span><span class="hljs-tag"><span class="xml"><span class="hljs-tag">&lt;</span></span><span class="hljs-title"><span class="xml"><span class="hljs-tag"><span class="hljs-title">label</span></span></span></span><span class="xml"><span class="hljs-tag">&gt;</span></span></span><span class="xml">账号</span><span class="hljs-tag"><span class="xml"><span class="hljs-tag">&lt;/</span></span><span class="hljs-title"><span class="xml"><span class="hljs-tag"><span class="hljs-title">label</span></span></span></span><span class="xml"><span class="hljs-tag">&gt;</span></span></span><span class="xml">
                    </span><span class="hljs-tag"><span class="xml"><span class="hljs-tag">&lt;</span></span><span class="hljs-title"><span class="xml"><span class="hljs-tag"><span class="hljs-title">input</span></span></span></span><span class="xml"><span class="hljs-tag"> </span></span><span class="hljs-attribute"><span class="xml"><span class="hljs-tag"><span class="hljs-attribute">type</span></span></span></span><span class="xml"><span class="hljs-tag">=</span></span><span class="hljs-value"><span class="xml"><span class="hljs-tag"><span class="hljs-value">"text"</span></span></span></span><span class="xml"><span class="hljs-tag"> </span></span><span class="hljs-attribute"><span class="xml"><span class="hljs-tag"><span class="hljs-attribute">value</span></span></span></span><span class="xml"><span class="hljs-tag">=</span></span><span class="hljs-value"><span class="xml"><span class="hljs-tag"><span class="hljs-value">{this.state.account}</span></span></span></span><span class="xml"><span class="hljs-tag"> </span></span><span class="hljs-attribute"><span class="xml"><span class="hljs-tag"><span class="hljs-attribute">disabled</span></span></span></span><span class="xml"><span class="hljs-tag">=</span></span><span class="hljs-value"><span class="xml"><span class="hljs-tag"><span class="hljs-value">{this.state.isPost}</span></span></span></span><span class="xml"><span class="hljs-tag"> /&gt;</span></span></span><span class="hljs-tag"><span class="xml"><span class="hljs-tag">&lt;</span></span><span class="hljs-title"><span class="xml"><span class="hljs-tag"><span class="hljs-title">br</span></span></span></span><span class="xml"><span class="hljs-tag">/&gt;</span></span></span><span class="xml">
                    </span><span class="hljs-tag"><span class="xml"><span class="hljs-tag">&lt;</span></span><span class="hljs-title"><span class="xml"><span class="hljs-tag"><span class="hljs-title">label</span></span></span></span><span class="xml"><span class="hljs-tag">&gt;</span></span></span><span class="xml">密码</span><span class="hljs-tag"><span class="xml"><span class="hljs-tag">&lt;/</span></span><span class="hljs-title"><span class="xml"><span class="hljs-tag"><span class="hljs-title">label</span></span></span></span><span class="xml"><span class="hljs-tag">&gt;</span></span></span><span class="xml">
                    </span><span class="hljs-tag"><span class="xml"><span class="hljs-tag">&lt;</span></span><span class="hljs-title"><span class="xml"><span class="hljs-tag"><span class="hljs-title">input</span></span></span></span><span class="xml"><span class="hljs-tag"> </span></span><span class="hljs-attribute"><span class="xml"><span class="hljs-tag"><span class="hljs-attribute">type</span></span></span></span><span class="xml"><span class="hljs-tag">=</span></span><span class="hljs-value"><span class="xml"><span class="hljs-tag"><span class="hljs-value">"password"</span></span></span></span><span class="xml"><span class="hljs-tag"> </span></span><span class="hljs-attribute"><span class="xml"><span class="hljs-tag"><span class="hljs-attribute">value</span></span></span></span><span class="xml"><span class="hljs-tag">=</span></span><span class="hljs-value"><span class="xml"><span class="hljs-tag"><span class="hljs-value">{this.state.password}</span></span></span></span><span class="xml"><span class="hljs-tag"> </span></span><span class="hljs-attribute"><span class="xml"><span class="hljs-tag"><span class="hljs-attribute">disabled</span></span></span></span><span class="xml"><span class="hljs-tag">=</span></span><span class="hljs-value"><span class="xml"><span class="hljs-tag"><span class="hljs-value">{this.state.isPost}</span></span></span></span><span class="xml"><span class="hljs-tag"> /&gt;</span></span></span><span class="hljs-tag"><span class="xml"><span class="hljs-tag">&lt;</span></span><span class="hljs-title"><span class="xml"><span class="hljs-tag"><span class="hljs-title">br</span></span></span></span><span class="xml"><span class="hljs-tag">/&gt;</span></span></span><span class="xml">
                    </span><span class="hljs-tag"><span class="xml"><span class="hljs-tag">&lt;</span></span><span class="hljs-title"><span class="xml"><span class="hljs-tag"><span class="hljs-title">button</span></span></span></span><span class="xml"><span class="hljs-tag"> </span></span><span class="hljs-attribute"><span class="xml"><span class="hljs-tag"><span class="hljs-attribute">disabled</span></span></span></span><span class="xml"><span class="hljs-tag">=</span></span><span class="hljs-value"><span class="xml"><span class="hljs-tag"><span class="hljs-value">{this.state.isPost}</span></span></span></span><span class="xml"><span class="hljs-tag">&gt;</span></span></span><span class="xml">登录</span><span class="hljs-tag"><span class="xml"><span class="hljs-tag">&lt;/</span></span><span class="hljs-title"><span class="xml"><span class="hljs-tag"><span class="hljs-title">button</span></span></span></span><span class="xml"><span class="hljs-tag">&gt;</span></span></span><span class="xml">
                    {this.state.isPost ? </span><span class="hljs-tag"><span class="xml"><span class="hljs-tag">&lt;</span></span><span class="hljs-title"><span class="xml"><span class="hljs-tag"><span class="hljs-title">p</span></span></span></span><span class="xml"><span class="hljs-tag">&gt;</span></span></span><span class="xml">'登录中，请稍候！'</span><span class="hljs-tag"><span class="xml"><span class="hljs-tag">&lt;/</span></span><span class="hljs-title"><span class="xml"><span class="hljs-tag"><span class="hljs-title">p</span></span></span></span><span class="xml"><span class="hljs-tag">&gt;</span></span></span><span class="xml"> : ''}
                </span><span class="hljs-tag"><span class="xml"><span class="hljs-tag">&lt;/</span></span><span class="hljs-title"><span class="xml"><span class="hljs-tag"><span class="hljs-title">form</span></span></span></span><span class="xml"><span class="hljs-tag">&gt;</span></span></span><span class="xml">
            )</span></span>;
    }
    });
</code></pre>
    <p>这是一个非常简单的示例，当用户提交表单的时候，会触发更新状态isPost为true，当状态变更以后，所有输入的控件都会切换到disabled，并且在表单底部，会出现<code>登录中，请稍候！</code>提示。</p>
    <span id="OSC_h4_6"></span><h4 id="-">接口函数</h4>
    <p>componentWillMount，一个组件被装载前（ReactDOM），会触发，只会被执行一次。</p>
    <p>componentDidMount，一个组件装载完成后，触发，只会被执行一次。</p>
    <p>componentWillReceiveProps(nextProps)，当一个组件接收到新的props的时候会被触发，这个其实就是用于当已经渲染了一个组件，需要更新这个组件的初始化参数时可使用这个接口（通过<code>&lt;Test name="" /&gt;</code>的方式）。</p>
    <p>shouldComponentUpdate(nextProps, nextState)，这是判断接口，必须返回true或false，这个接口是用来判断组件是否该触发更新。</p>
    <p>componentWillUpdate(nextProps, nextState)，每次接收到新的props或state时，会触发，但是不包含初始化渲染的时候。官网特别提示，不要在这个函数内执行setState，他会触发循环更新……</p>
    <p>componentDidUpdate(prevProps, prevState)，当状态更新已经写入DOM元素后，触发执行。</p>
    <p>componentWillUnmount()，当一个DOM元素被卸载的时候触发。</p>
    <span id="OSC_h3_7"></span><h3 id="-">补完整示例</h3>
    <p>为了方便内部示例传阅，补一个完整示例。</p>
<pre><code class="lang-shell hljs q">mkdir test_reactjs
    npm init <span class="hljs-comment"><span class="hljs-comment">// 然后一路回车</span></span>
    npm install gulp gulp-babel babel-preset-react --<span class="hljs-built_in"><span class="hljs-built_in">save</span></span>-<span class="hljs-built_in"><span class="hljs-built_in">dev</span></span>
    bower init <span class="hljs-comment"><span class="hljs-comment">// 一路回车</span></span>
    bower install react --<span class="hljs-built_in"><span class="hljs-built_in">save</span></span>
</code></pre>
    <p>这样基础的环境已经足够了，编辑gulpfile.js</p>
<pre><code class="lang-js hljs javascript"><span class="hljs-keyword"><span class="hljs-keyword">var</span></span> gulp = <span class="hljs-built_in"><span class="hljs-built_in">require</span></span>(<span class="hljs-string"><span class="hljs-string">'gulp'</span></span>);
    <span class="hljs-keyword"><span class="hljs-keyword">var</span></span> babel = <span class="hljs-built_in"><span class="hljs-built_in">require</span></span>(<span class="hljs-string"><span class="hljs-string">'gulp-babel'</span></span>);

    gulp.task(<span class="hljs-string"><span class="hljs-string">'jsx'</span></span>, <span class="hljs-function"><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span><span class="hljs-function"> </span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">()</span></span></span><span class="hljs-function"> </span></span>{
    gulp.src(<span class="hljs-string"><span class="hljs-string">'./jsx/*.jsx'</span></span>)
    .pipe(babel({
    presets: [<span class="hljs-string"><span class="hljs-string">'react'</span></span>]
    }))
    .pipe(gulp.dest(<span class="hljs-string"><span class="hljs-string">'./jsx'</span></span>));
    });

    gulp.task(<span class="hljs-string"><span class="hljs-string">'watch-jsx'</span></span>, [<span class="hljs-string"><span class="hljs-string">'jsx'</span></span>], <span class="hljs-function"><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span><span class="hljs-function"> </span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">()</span></span></span><span class="hljs-function"> </span></span>{
    gulp.watch([
    <span class="hljs-string"><span class="hljs-string">'./jsx/*.jsx'</span></span>
    ], [<span class="hljs-string"><span class="hljs-string">'jsx'</span></span>]);
    });
</code></pre>
    <p>添加一个html文件</p>
<pre><code class="lang-html hljs xml"><span class="hljs-doctype"><span class="hljs-doctype">&lt;!DOCTYPE html&gt;</span></span>
    <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-title"><span class="hljs-tag"><span class="hljs-title">html</span></span></span><span class="hljs-tag"> </span><span class="hljs-attribute"><span class="hljs-tag"><span class="hljs-attribute">lang</span></span></span><span class="hljs-tag">=</span><span class="hljs-value"><span class="hljs-tag"><span class="hljs-value">"en"</span></span></span><span class="hljs-tag">&gt;</span></span>
    <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-title"><span class="hljs-tag"><span class="hljs-title">head</span></span></span><span class="hljs-tag">&gt;</span></span>
    <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-title"><span class="hljs-tag"><span class="hljs-title">meta</span></span></span><span class="hljs-tag"> </span><span class="hljs-attribute"><span class="hljs-tag"><span class="hljs-attribute">charset</span></span></span><span class="hljs-tag">=</span><span class="hljs-value"><span class="hljs-tag"><span class="hljs-value">"UTF-8"</span></span></span><span class="hljs-tag">&gt;</span></span>
    <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-title"><span class="hljs-tag"><span class="hljs-title">title</span></span></span><span class="hljs-tag">&gt;</span></span>Title<span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-title"><span class="hljs-tag"><span class="hljs-title">title</span></span></span><span class="hljs-tag">&gt;</span></span>
    <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-title"><span class="hljs-tag"><span class="hljs-title">script</span></span></span><span class="hljs-tag"> </span><span class="hljs-attribute"><span class="hljs-tag"><span class="hljs-attribute">type</span></span></span><span class="hljs-tag">=</span><span class="hljs-value"><span class="hljs-tag"><span class="hljs-value">"text/javascript"</span></span></span><span class="hljs-tag"> </span><span class="hljs-attribute"><span class="hljs-tag"><span class="hljs-attribute">src</span></span></span><span class="hljs-tag">=</span><span class="hljs-value"><span class="hljs-tag"><span class="hljs-value">"bower_components/react/react.js"</span></span></span><span class="hljs-tag">&gt;</span></span><span class="undefined"></span><span class="hljs-tag"><span class="undefined"></span><span class="hljs-tag">&lt;/</span><span class="hljs-title"><span class="hljs-tag"><span class="hljs-title">script</span></span></span><span class="hljs-tag">&gt;</span></span>
    <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-title"><span class="hljs-tag"><span class="hljs-title">script</span></span></span><span class="hljs-tag"> </span><span class="hljs-attribute"><span class="hljs-tag"><span class="hljs-attribute">type</span></span></span><span class="hljs-tag">=</span><span class="hljs-value"><span class="hljs-tag"><span class="hljs-value">"text/javascript"</span></span></span><span class="hljs-tag"> </span><span class="hljs-attribute"><span class="hljs-tag"><span class="hljs-attribute">src</span></span></span><span class="hljs-tag">=</span><span class="hljs-value"><span class="hljs-tag"><span class="hljs-value">"bower_components/react/react-dom.js"</span></span></span><span class="hljs-tag">&gt;</span></span><span class="undefined"></span><span class="hljs-tag"><span class="undefined"></span><span class="hljs-tag">&lt;/</span><span class="hljs-title"><span class="hljs-tag"><span class="hljs-title">script</span></span></span><span class="hljs-tag">&gt;</span></span>
    <span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-title"><span class="hljs-tag"><span class="hljs-title">head</span></span></span><span class="hljs-tag">&gt;</span></span>
    <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-title"><span class="hljs-tag"><span class="hljs-title">body</span></span></span><span class="hljs-tag">&gt;</span></span>
    <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-title"><span class="hljs-tag"><span class="hljs-title">div</span></span></span><span class="hljs-tag"> </span><span class="hljs-attribute"><span class="hljs-tag"><span class="hljs-attribute">id</span></span></span><span class="hljs-tag">=</span><span class="hljs-value"><span class="hljs-tag"><span class="hljs-value">"hello"</span></span></span><span class="hljs-tag">&gt;</span></span><span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-title"><span class="hljs-tag"><span class="hljs-title">div</span></span></span><span class="hljs-tag">&gt;</span></span>
    <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-title"><span class="hljs-tag"><span class="hljs-title">script</span></span></span><span class="hljs-tag"> </span><span class="hljs-attribute"><span class="hljs-tag"><span class="hljs-attribute">type</span></span></span><span class="hljs-tag">=</span><span class="hljs-value"><span class="hljs-tag"><span class="hljs-value">"text/javascript"</span></span></span><span class="hljs-tag"> </span><span class="hljs-attribute"><span class="hljs-tag"><span class="hljs-attribute">src</span></span></span><span class="hljs-tag">=</span><span class="hljs-value"><span class="hljs-tag"><span class="hljs-value">"jsx/LoginForm.js"</span></span></span><span class="hljs-tag">&gt;</span></span><span class="undefined"></span><span class="hljs-tag"><span class="undefined"></span><span class="hljs-tag">&lt;/</span><span class="hljs-title"><span class="hljs-tag"><span class="hljs-title">script</span></span></span><span class="hljs-tag">&gt;</span></span>
    <span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-title"><span class="hljs-tag"><span class="hljs-title">body</span></span></span><span class="hljs-tag">&gt;</span></span>
    <span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-title"><span class="hljs-tag"><span class="hljs-title">html</span></span></span><span class="hljs-tag">&gt;</span></span>
</code></pre>
    <p>然后加入/jsx/LoginForm.jsx</p>
<pre><code class="lang-js hljs javascript"><span class="hljs-keyword"><span class="hljs-keyword">var</span></span> LoginForm = React.createClass({
    displayName: <span class="hljs-string"><span class="hljs-string">'LoginForm'</span></span>,
    getInitialState: <span class="hljs-function"><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">()</span></span></span><span class="hljs-function"> </span></span>{
    <span class="hljs-keyword"><span class="hljs-keyword">return</span></span> {
    isPost: <span class="hljs-literal"><span class="hljs-literal">false</span></span>,
    account: <span class="hljs-string"><span class="hljs-string">''</span></span>,
    password: <span class="hljs-string"><span class="hljs-string">''</span></span>
    };
    },
    handleSubmit: <span class="hljs-function"><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(event)</span></span></span><span class="hljs-function"> </span></span>{
    event.preventDefault();
    <span class="hljs-keyword"><span class="hljs-keyword">if</span></span> (!<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.state.isPost) {
    <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.setState({ isPost: <span class="hljs-literal"><span class="hljs-literal">true</span></span> }); <span class="hljs-comment"><span class="hljs-comment">// 注意，这里设置了状态</span></span>
    }
    },
    handleChange: <span class="hljs-function"><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(event)</span></span></span><span class="hljs-function"> </span></span>{
    <span class="hljs-keyword"><span class="hljs-keyword">var</span></span> target = event.target;
    <span class="hljs-keyword"><span class="hljs-keyword">var</span></span> dataField = target.getAttribute(<span class="hljs-string"><span class="hljs-string">'data-field'</span></span>), updateData = {};
    updateData[dataField] = target.value;
    <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.setState(updateData)
    },
    render: <span class="hljs-function"><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span><span class="hljs-function"> </span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">()</span></span></span><span class="hljs-function"> </span></span>{
    <span class="hljs-keyword"><span class="hljs-keyword">return</span></span> (
            <span class="xml"><span class="hljs-tag"><span class="xml"><span class="hljs-tag">&lt;</span></span><span class="hljs-title"><span class="xml"><span class="hljs-tag"><span class="hljs-title">form</span></span></span></span><span class="xml"><span class="hljs-tag"> </span></span><span class="hljs-attribute"><span class="xml"><span class="hljs-tag"><span class="hljs-attribute">method</span></span></span></span><span class="xml"><span class="hljs-tag">=</span></span><span class="hljs-value"><span class="xml"><span class="hljs-tag"><span class="hljs-value">"post"</span></span></span></span><span class="xml"><span class="hljs-tag"> </span></span><span class="hljs-attribute"><span class="xml"><span class="hljs-tag"><span class="hljs-attribute">onSubmit</span></span></span></span><span class="xml"><span class="hljs-tag">=</span></span><span class="hljs-value"><span class="xml"><span class="hljs-tag"><span class="hljs-value">{this.handleSubmit}</span></span></span></span><span class="xml"><span class="hljs-tag">&gt;</span></span></span><span class="xml">
                </span><span class="hljs-tag"><span class="xml"><span class="hljs-tag">&lt;</span></span><span class="hljs-title"><span class="xml"><span class="hljs-tag"><span class="hljs-title">label</span></span></span></span><span class="xml"><span class="hljs-tag">&gt;</span></span></span><span class="xml">账号</span><span class="hljs-tag"><span class="xml"><span class="hljs-tag">&lt;/</span></span><span class="hljs-title"><span class="xml"><span class="hljs-tag"><span class="hljs-title">label</span></span></span></span><span class="xml"><span class="hljs-tag">&gt;</span></span></span><span class="xml">
                </span><span class="hljs-tag"><span class="xml"><span class="hljs-tag">&lt;</span></span><span class="hljs-title"><span class="xml"><span class="hljs-tag"><span class="hljs-title">input</span></span></span></span><span class="xml"><span class="hljs-tag"> </span></span><span class="hljs-attribute"><span class="xml"><span class="hljs-tag"><span class="hljs-attribute">type</span></span></span></span><span class="xml"><span class="hljs-tag">=</span></span><span class="hljs-value"><span class="xml"><span class="hljs-tag"><span class="hljs-value">"text"</span></span></span></span><span class="xml"><span class="hljs-tag"> </span></span><span class="hljs-attribute"><span class="xml"><span class="hljs-tag"><span class="hljs-attribute">value</span></span></span></span><span class="xml"><span class="hljs-tag">=</span></span><span class="hljs-value"><span class="xml"><span class="hljs-tag"><span class="hljs-value">{this.state.account}</span></span></span></span><span class="xml"><span class="hljs-tag"> </span></span><span class="hljs-attribute"><span class="xml"><span class="hljs-tag"><span class="hljs-attribute">data-field</span></span></span></span><span class="xml"><span class="hljs-tag">=</span></span><span class="hljs-value"><span class="xml"><span class="hljs-tag"><span class="hljs-value">"account"</span></span></span></span><span class="xml"><span class="hljs-tag"> </span></span><span class="hljs-attribute"><span class="xml"><span class="hljs-tag"><span class="hljs-attribute">onChange</span></span></span></span><span class="xml"><span class="hljs-tag">=</span></span><span class="hljs-value"><span class="xml"><span class="hljs-tag"><span class="hljs-value">{this.handleChange}</span></span></span></span><span class="xml"><span class="hljs-tag"> </span></span><span class="hljs-attribute"><span class="xml"><span class="hljs-tag"><span class="hljs-attribute">disabled</span></span></span></span><span class="xml"><span class="hljs-tag">=</span></span><span class="hljs-value"><span class="xml"><span class="hljs-tag"><span class="hljs-value">{this.state.isPost}</span></span></span></span><span class="xml"><span class="hljs-tag"> /&gt;</span></span></span><span class="hljs-tag"><span class="xml"><span class="hljs-tag">&lt;</span></span><span class="hljs-title"><span class="xml"><span class="hljs-tag"><span class="hljs-title">br</span></span></span></span><span class="xml"><span class="hljs-tag">/&gt;</span></span></span><span class="xml">
                </span><span class="hljs-tag"><span class="xml"><span class="hljs-tag">&lt;</span></span><span class="hljs-title"><span class="xml"><span class="hljs-tag"><span class="hljs-title">label</span></span></span></span><span class="xml"><span class="hljs-tag">&gt;</span></span></span><span class="xml">密码</span><span class="hljs-tag"><span class="xml"><span class="hljs-tag">&lt;/</span></span><span class="hljs-title"><span class="xml"><span class="hljs-tag"><span class="hljs-title">label</span></span></span></span><span class="xml"><span class="hljs-tag">&gt;</span></span></span><span class="xml">
                </span><span class="hljs-tag"><span class="xml"><span class="hljs-tag">&lt;</span></span><span class="hljs-title"><span class="xml"><span class="hljs-tag"><span class="hljs-title">input</span></span></span></span><span class="xml"><span class="hljs-tag"> </span></span><span class="hljs-attribute"><span class="xml"><span class="hljs-tag"><span class="hljs-attribute">type</span></span></span></span><span class="xml"><span class="hljs-tag">=</span></span><span class="hljs-value"><span class="xml"><span class="hljs-tag"><span class="hljs-value">"password"</span></span></span></span><span class="xml"><span class="hljs-tag"> </span></span><span class="hljs-attribute"><span class="xml"><span class="hljs-tag"><span class="hljs-attribute">value</span></span></span></span><span class="xml"><span class="hljs-tag">=</span></span><span class="hljs-value"><span class="xml"><span class="hljs-tag"><span class="hljs-value">{this.state.password}</span></span></span></span><span class="xml"><span class="hljs-tag"> </span></span><span class="hljs-attribute"><span class="xml"><span class="hljs-tag"><span class="hljs-attribute">data-field</span></span></span></span><span class="xml"><span class="hljs-tag">=</span></span><span class="hljs-value"><span class="xml"><span class="hljs-tag"><span class="hljs-value">"password"</span></span></span></span><span class="xml"><span class="hljs-tag"> </span></span><span class="hljs-attribute"><span class="xml"><span class="hljs-tag"><span class="hljs-attribute">onChange</span></span></span></span><span class="xml"><span class="hljs-tag">=</span></span><span class="hljs-value"><span class="xml"><span class="hljs-tag"><span class="hljs-value">{this.handleChange}</span></span></span></span><span class="xml"><span class="hljs-tag"> </span></span><span class="hljs-attribute"><span class="xml"><span class="hljs-tag"><span class="hljs-attribute">disabled</span></span></span></span><span class="xml"><span class="hljs-tag">=</span></span><span class="hljs-value"><span class="xml"><span class="hljs-tag"><span class="hljs-value">{this.state.isPost}</span></span></span></span><span class="xml"><span class="hljs-tag"> /&gt;</span></span></span><span class="hljs-tag"><span class="xml"><span class="hljs-tag">&lt;</span></span><span class="hljs-title"><span class="xml"><span class="hljs-tag"><span class="hljs-title">br</span></span></span></span><span class="xml"><span class="hljs-tag">/&gt;</span></span></span><span class="xml">
                </span><span class="hljs-tag"><span class="xml"><span class="hljs-tag">&lt;</span></span><span class="hljs-title"><span class="xml"><span class="hljs-tag"><span class="hljs-title">button</span></span></span></span><span class="xml"><span class="hljs-tag"> </span></span><span class="hljs-attribute"><span class="xml"><span class="hljs-tag"><span class="hljs-attribute">disabled</span></span></span></span><span class="xml"><span class="hljs-tag">=</span></span><span class="hljs-value"><span class="xml"><span class="hljs-tag"><span class="hljs-value">{this.state.isPost}</span></span></span></span><span class="xml"><span class="hljs-tag">&gt;</span></span></span><span class="xml">登录</span><span class="hljs-tag"><span class="xml"><span class="hljs-tag">&lt;/</span></span><span class="hljs-title"><span class="xml"><span class="hljs-tag"><span class="hljs-title">button</span></span></span></span><span class="xml"><span class="hljs-tag">&gt;</span></span></span><span class="xml">
                {this.state.isPost ? </span><span class="hljs-tag"><span class="xml"><span class="hljs-tag">&lt;</span></span><span class="hljs-title"><span class="xml"><span class="hljs-tag"><span class="hljs-title">p</span></span></span></span><span class="xml"><span class="hljs-tag">&gt;</span></span></span><span class="xml">登录中，请稍候！</span><span class="hljs-tag"><span class="xml"><span class="hljs-tag">&lt;/</span></span><span class="hljs-title"><span class="xml"><span class="hljs-tag"><span class="hljs-title">p</span></span></span></span><span class="xml"><span class="hljs-tag">&gt;</span></span></span><span class="xml"> : ''}
            </span><span class="hljs-tag"><span class="xml"><span class="hljs-tag">&lt;/</span></span><span class="hljs-title"><span class="xml"><span class="hljs-tag"><span class="hljs-title">form</span></span></span></span><span class="xml"><span class="hljs-tag">&gt;</span></span></span><span class="xml">
        )</span></span>;
    }
    });

    ReactDOM.render(<span class="xml"><span class="hljs-tag"><span class="xml"><span class="hljs-tag">&lt;</span></span><span class="hljs-title"><span class="xml"><span class="hljs-tag"><span class="hljs-title">LoginForm</span></span></span></span><span class="xml"><span class="hljs-tag"> /&gt;</span></span></span><span class="xml">, document.getElementById('hello'));</span></span><span class="xml">
</span></code></pre>
    <p>最后执行gulp jsx，刷新页面，你就能看到效果了。</p>
    <p>执行gulp watch-jsx，你就可以一边修改一边预览了。</p>
    <span id="OSC_h3_8"></span><h3 id="-">个人经验</h3>
    <p>至此，你已经基本了解了ReactJS的内容，可以开始尝试写一些自己的组件了。</p>
    <p>官网的例子呢，显得十分高大上，比如getting start那个Comment Box，组件内套着组件。</p>
    <p>但从实际出发，这里有一个开发者经常容易出现的问题，就是过度封装，最后导致自己在不同的组件中不停的切换调试，而找不到问题的根源。而在React里，最显著的问题就是props和state之间的转换问题，当你调用&lt;Component prop="value" /&gt;将参数传入时，是props，你还需要再处理从props到state之间的转换，也就是当你有更多封装，你需要关注到底这个组件的props是不是有效的转换为state了，这是一个很繁琐的问题，随着你封装的越具体，调试的复杂度和维度随之增长，真的得不偿失。经常会发生，某个组件处理不得当，导致某个部分无法实时更新数据。</p>
    <p>所以，个人建议，最好的做法是，对你的界面做一个整体规划，整体框架性渲染，统一在一个类中，在这个框架中，划分出具体的区域，然后将不同的组件加载渲染这些对应的区域中区，而不要想着在一个框架内，嵌入不同的组件，借助一个整体的state去联动多个嵌套组件的update，那样你要调试的工作量实在太大了，真是调到天荒地老。</p>
    <p>比如，我的项目中，规划出Page和Component两个逻辑分区，Page表述的是大框架，Page更新，就全页都更新。而Component则是具体的组件，并且我为组件写了特别的加载方法，他不是通过嵌入在Page的html代码中的方式来加载的，而是通过特定的事件触发，来找到对应的Container来装载的，这样有助于我更灵活和准确的来调试Page和Component。</p>
    <p>补充的说，用ReactJS开发，尤其是如果你是全部用ReactJS来开发的话（比如我手头的一个项目，因为需要用WebSocket做一些通信，我希望页面本身维持不刷新），其实开发的情况就和开发手机App无差别了，因为所有的数据你都需要本地获取一次。如何优化异步加载获取数据的合理性就变得更加重要，而ReactJS并不提供这方面的解决方案。于是乎，我用了一天的时间，封装了一个非常简易的前端Model，这个Model只是用于装载数据和维持数据实例的检索，而不关心具体的数据逻辑（数据逻辑还是交给后端处理吧），这方面前端做的再精细也枉然。</p>
    <p>不得不说，ReactJS真的是一个非常伟大的东西，他的确解放了前端的开发工作量，基于ReactJS封装的一个组件，重用性远比用html或者别的什么机制写成的方式输出的组件，模板那些就更别提了。非常推荐前端，乃至后端的开发人员都尝试接触一下，对于拓宽自己的开发方式、思维，还是有很大帮助的。</p>
</div>
</body>
</html>